import React, { useEffect, useState } from "react"
import Taro from "@tarojs/taro"
import { Image, Text, View } from "@tarojs/components"
import { statusData } from "../../common/index"
import "./index.scss"
import http from "../../utils/http"
import copyIcon from "../../assets/images/copy.png"
import { copyText, getUser } from "../../utils"
import Modal from "../../components/Modal"
import phoneIcon from "../../assets/images/phone2.png"

export default function () {
  const userInfo = getUser()
  const isAdmin = userInfo?.role != 0
  const [orderDetail, setOrderDetail] = useState({})
  const [showModal, setShowModal] = useState(false)

  const getDetail = async () => {
    const ticketId = Taro.getCurrentInstance().router.params.id
    const { data } = await http.get(`/core/ticket/search/${ticketId}`)
    if (data) {
      setOrderDetail(data)
    }
  }

  const changeStatus = async status => {
    const { data } = await http.post("/core/ticket/update", {
      ticketId: orderDetail.ticketId,
      status,
    })
    setTimeout(() => {
      setShowModal(false)
    }, 2000)
    if (data) {
      Taro.showToast({
        title: "操作成功",
        icon: "success",
      })
      getDetail()
    }
  }

  useEffect(() => {
    getDetail()
  }, [])

  const modalData = {
    cancel: {
      title: "取消订单",
      text: isAdmin ? "取消后，费用将原路退回" : "该订单为待支付订单，请与客户确认后再取消",
      text2: "",
      confirmText: "确认取消",
      onConfirm: () => {
        changeStatus(5)
      },
    },
    pay: {
      title: "确认已支付",
      text: "请确认钱款是否到账，到账后确认支付已完成",
      text2: "",
      confirmText: "确认已支付",
      onConfirm: () => {
        changeStatus(2)
      },
    },
    take: {
      title: "确认取拍",
      text: "请在收到球拍后，验收相关物品，无误后点击确认取拍",
      text2: "",
      confirmText: "确认取拍",
      onConfirm: () => {
        changeStatus(4)
      },
    },
    threading: {
      title: "穿线完成",
      text: "请确认穿线无误，为保障客户质量，请检查后确认完成",
      text2: "",
      confirmText: "穿线完成",
      onConfirm: () => {
        changeStatus(3)
      },
    },
  }

  return (
    <View className="page-order-detail">
      <View className="title">用户信息</View>
      <View className="row">
        <View className="label">用户昵称</View>
        <View className="value">{orderDetail.userName}</View>
      </View>
      <View className="row">
        <View className="label">联系电话</View>
        <View className="value" onClick={() => Taro.makePhoneCall({ phoneNumber: orderDetail.phone })}>
          <View style={{ color: "#2E6BB9" }}>{orderDetail.phone}</View>
          <Image src={phoneIcon}></Image>
        </View>
      </View>
      <View className="title">订单信息</View>
      <View className="row">
        <View className="label">球拍品牌</View>
        <View className="value">{orderDetail.racketBrand}</View>
      </View>
      <View className="row">
        <View className="label">穿线类型</View>
        <View className="value">{orderDetail.threadingType}</View>
      </View>
      {orderDetail.linePrice > 0 && (
        <View className="row">
          <View className="label">线型号</View>
          <View className="value">{orderDetail.lineType}</View>
        </View>
      )}
      <View className="row">
        <View className="label">磅数</View>
        <View className="value">{orderDetail.linePound}</View>
      </View>
      <View className="row">
        <View className="label">用户备注</View>
        <View className="value">{orderDetail.userRemark || <Text style={{ color: "#aaaaaa" }}>暂无备注</Text>}</View>
      </View>
      <View className="row">
        <View className="label">订单编号</View>
        <View className="value">
          {orderDetail.ticketId}
          <Image
            src={copyIcon}
            className="copy"
            onClick={() => {
              copyText(orderDetail.ticketId)
            }}
          ></Image>
        </View>
      </View>
      <View className="row">
        <View className="label">场馆备注</View>
        <View className="value">{orderDetail.adminRemark || <Text style={{ color: "#aaaaaa" }}>暂无备注</Text>}</View>
      </View>
      <View className="row">
        <View className="label">下单时间</View>
        <View className="value">{orderDetail.createdAt}</View>
      </View>
      <View className="row">
        <View className="label">订单金额</View>
        <View className="value">¥{orderDetail.price?.toFixed(2)}</View>
      </View>
      <View className="row">
        <View className="label">订单状态</View>
        <View className="value">{statusData[orderDetail.status]?.name}</View>
      </View>
      <View className="title">订单明细</View>
      <View className="row">
        <View className="label">线材费用</View>
        <View className="value">¥{((orderDetail.price * 100 - orderDetail.servicePrice * 100) / 100).toFixed(2)}</View>
      </View>
      <View className="row">
        <View className="label">服务费用</View>
        <View className="value">¥{orderDetail.servicePrice?.toFixed(2) || 0}</View>
      </View>
      <View className="row">
        <View className="label">总费用</View>
        <View className="value">¥{orderDetail.price?.toFixed(2)}</View>
      </View>
      {userInfo.role != 0 && (
        <View className="btns">
          {orderDetail.status == 1 && (
            <View className="btn confirm" onClick={() => setShowModal("pay")}>
              确认已支付
            </View>
          )}
          {orderDetail.status == 2 && (
            <View className="btn confirm" onClick={() => setShowModal("threading")}>
              穿线完成
            </View>
          )}
          {orderDetail.status == 3 && (
            <View className="btn confirm" onClick={() => setShowModal("take")}>
              确认取拍
            </View>
          )}
          {(orderDetail.status == 1 || orderDetail.status == 2) && (
            <View className="btn concel" onClick={() => setShowModal("cancel")}>
              取消预约单
            </View>
          )}
        </View>
      )}
      <Modal
        isOpened={showModal}
        titleText={modalData[showModal]?.title}
        cancelText="取消"
        onCancel={() => setShowModal(false)}
        onConfirm={() => modalData[showModal]?.onConfirm()}
        confirmText={modalData[showModal]?.confirmText}
      >
        <View className="modal-text">
          <View>{modalData[showModal]?.text}</View>
          <View>{modalData[showModal]?.text2}</View>
        </View>
      </Modal>
    </View>
  )
}
